<div class="container mx-auto p-8 max-w-7xl bg-base-100">
  <h1 class="text-4xl font-bold mb-8">Design System - daisyUI Components</h1>

  <section class="mb-12">
    <h2 class="text-3xl font-bold mb-6">Buttons</h2>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Sizes</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-xs">Extra Small</button>
        <button class="btn btn-sm">Small</button>
        <button class="btn btn-md">Medium</button>
        <button class="btn btn-lg">Large</button>
        <button class="btn btn-xl">Extra Large</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Colors - XS Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-xs">Default</button>
        <button class="btn btn-neutral btn-xs">Neutral</button>
        <button class="btn btn-primary btn-xs">Primary</button>
        <button class="btn btn-secondary btn-xs">Secondary</button>
        <button class="btn btn-accent btn-xs">Accent</button>
        <button class="btn btn-info btn-xs">Info</button>
        <button class="btn btn-success btn-xs">Success</button>
        <button class="btn btn-warning btn-xs">Warning</button>
        <button class="btn btn-error btn-xs">Error</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Colors - SM Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-sm">Default</button>
        <button class="btn btn-neutral btn-sm">Neutral</button>
        <button class="btn btn-primary btn-sm">Primary</button>
        <button class="btn btn-secondary btn-sm">Secondary</button>
        <button class="btn btn-accent btn-sm">Accent</button>
        <button class="btn btn-info btn-sm">Info</button>
        <button class="btn btn-success btn-sm">Success</button>
        <button class="btn btn-warning btn-sm">Warning</button>
        <button class="btn btn-error btn-sm">Error</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Colors - MD Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-md">Default</button>
        <button class="btn btn-neutral btn-md">Neutral</button>
        <button class="btn btn-primary btn-md">Primary</button>
        <button class="btn btn-secondary btn-md">Secondary</button>
        <button class="btn btn-accent btn-md">Accent</button>
        <button class="btn btn-info btn-md">Info</button>
        <button class="btn btn-success btn-md">Success</button>
        <button class="btn btn-warning btn-md">Warning</button>
        <button class="btn btn-error btn-md">Error</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Colors - LG Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-lg">Default</button>
        <button class="btn btn-neutral btn-lg">Neutral</button>
        <button class="btn btn-primary btn-lg">Primary</button>
        <button class="btn btn-secondary btn-lg">Secondary</button>
        <button class="btn btn-accent btn-lg">Accent</button>
        <button class="btn btn-info btn-lg">Info</button>
        <button class="btn btn-success btn-lg">Success</button>
        <button class="btn btn-warning btn-lg">Warning</button>
        <button class="btn btn-error btn-lg">Error</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Colors - XL Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-xl">Default</button>
        <button class="btn btn-neutral btn-xl">Neutral</button>
        <button class="btn btn-primary btn-xl">Primary</button>
        <button class="btn btn-secondary btn-xl">Secondary</button>
        <button class="btn btn-accent btn-xl">Accent</button>
        <button class="btn btn-info btn-xl">Info</button>
        <button class="btn btn-success btn-xl">Success</button>
        <button class="btn btn-warning btn-xl">Warning</button>
        <button class="btn btn-error btn-xl">Error</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Styles - MD Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-primary">Solid</button>
        <button class="btn btn-primary btn-outline">Outline</button>
        <button class="btn btn-primary btn-dash">Dash</button>
        <button class="btn btn-primary btn-soft">Soft</button>
        <button class="btn btn-primary btn-ghost">Ghost</button>
        <button class="btn btn-primary btn-link">Link</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button States - MD Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-primary">Normal</button>
        <button class="btn btn-primary btn-active">Active</button>
        <button class="btn btn-primary btn-disabled">Disabled</button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Button Modifiers - MD Size</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <button class="btn btn-primary btn-wide">Wide</button>
        <button class="btn btn-primary btn-block">Block</button>
        <button class="btn btn-primary btn-square">SQ</button>
        <button class="btn btn-primary btn-circle">C</button>
      </div>
    </div>
  </section>

  <section class="mb-12">
    <h2 class="text-3xl font-bold mb-6">Alerts</h2>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Alert Colors - Default Style</h3>
      <div class="flex flex-col gap-4">
        <div role="alert" class="alert">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Default alert with icon</span>
        </div>
        <div role="alert" class="alert alert-info">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Info alert with icon</span>
        </div>
        <div role="alert" class="alert alert-success">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Success alert with icon</span>
        </div>
        <div role="alert" class="alert alert-warning">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
          <span>Warning alert with icon</span>
        </div>
        <div role="alert" class="alert alert-error">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Error alert with icon</span>
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Alert Styles - Info Color</h3>
      <div class="flex flex-col gap-4">
        <div role="alert" class="alert alert-info">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Info alert - default style</span>
        </div>
        <div role="alert" class="alert alert-info alert-outline">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Info alert - outline style</span>
        </div>
        <div role="alert" class="alert alert-info alert-dash">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Info alert - dash style</span>
        </div>
        <div role="alert" class="alert alert-info alert-soft">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Info alert - soft style</span>
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Alert Styles - Success Color</h3>
      <div class="flex flex-col gap-4">
        <div role="alert" class="alert alert-success">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Success alert - default style</span>
        </div>
        <div role="alert" class="alert alert-success alert-outline">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Success alert - outline style</span>
        </div>
        <div role="alert" class="alert alert-success alert-dash">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Success alert - dash style</span>
        </div>
        <div role="alert" class="alert alert-success alert-soft">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Success alert - soft style</span>
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Alert Styles - Warning Color</h3>
      <div class="flex flex-col gap-4">
        <div role="alert" class="alert alert-warning">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
          <span>Warning alert - default style</span>
        </div>
        <div role="alert" class="alert alert-warning alert-outline">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
          <span>Warning alert - outline style</span>
        </div>
        <div role="alert" class="alert alert-warning alert-dash">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
          <span>Warning alert - dash style</span>
        </div>
        <div role="alert" class="alert alert-warning alert-soft">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
          <span>Warning alert - soft style</span>
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Alert Styles - Error Color</h3>
      <div class="flex flex-col gap-4">
        <div role="alert" class="alert alert-error">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Error alert - default style</span>
        </div>
        <div role="alert" class="alert alert-error alert-outline">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Error alert - outline style</span>
        </div>
        <div role="alert" class="alert alert-error alert-dash">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Error alert - dash style</span>
        </div>
        <div role="alert" class="alert alert-error alert-soft">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Error alert - soft style</span>
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-2xl font-semibold mb-4">Alert Directions</h3>
      <div class="flex flex-col gap-4">
        <div role="alert" class="alert alert-info">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Default (horizontal) alert</span>
          <button class="btn btn-sm">Action</button>
        </div>
        <div role="alert" class="alert alert-info alert-vertical">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Vertical alert</span>
          <button class="btn btn-sm">Action</button>
        </div>
      </div>
    </div>
  </section>
</div>
